<script setup>
import { ref,reactive,computed,watch,watchEffect } from "vue";
import dirTree from "./dirTree.vue"
import dirIcon from "./dirIcon.vue"
defineProps({
	title:String,
	data:Array
})
const active=ref(true)

</script>

<template>
<div class="mDir" v-if="data.length">
	<div class="title" @click="active=!active">
		<dirIcon :active="active" />
		{{title}}
	</div>
	<dirTree v-show="active" v-for="item in data" :key="item.name" :data="item" :index="1"></dirTree>
</div>

</template>


<style scoped>
.mDir{
	cursor: pointer;
}
.title{
	padding: .1em 4px;
	font-weight: bold;
	display: flex;
	flex-direction: row;
	align-items: center;
	box-sizing: border-box;
	line-height: calc( .2em + 4px + var( --dir-size));
	height: calc( .2em + 4px + var( --dir-size));
}
.title:active{
	border: 2px solid #b8b8b8;
}
</style>